<template>
	<view class="department-detail-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="零活详情"></CustomNav>
		<view class="info-block block" :style="'display: flex;background:rgba(255,255,255,0.7);align-items: center;margin-top:'+mt">
			<image :src="detail.logo" class="company-photo"></image>
			<view class="company-info">
				<view class="company-name-block">
					<view class="company-name">{{detail.name}}</view>
					<view class="btn-block" style="justify-content: flex-end;">
						<!-- <image src="/static/image/report.png" class="btn-item"></image> -->
						<button open-type="share" style="margin: 0;">
							<image src="/static/image/share.png" class="btn-item"></image>
						</button>
					</view>
				</view>
				
				<view class="evaluate">用工方 {{detail.employer_score||'暂无评分'}} · 零工方 {{detail.workers_score||'暂无评分'}}</view>
			</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">公司介绍</view>
			<view class="introduce">{{detail.introduce}}</view>
		</view>
		<view class="info-block block">
			<view class="title">公司地址</view>
			<view class="introduce">{{detail.address}}</view>
		</view>
		<view class="info-block block" style="margin: 30rpx auto;">
			<view class="title">公司评价</view>
			<view class="tab-block">
				<view :class="tabActive==2?'active':''" @click="tabActive=2" class="tab-item">用工方评价</view>
				<view :class="tabActive==3?'active':''" @click="tabActive=3" class="tab-item">零工方评价</view>
			</view>
			<view class="list-block">
				<template v-if="list.length>0">
					<view class="list-item" v-for="item in list" :key="item.id">
						<view class="user-info">
							<image class="user-photo" mode="aspectFill" :src="item.user.avatar"></image>
							<view class="user-name">{{item.user.name | filterRealName}}</view>
						</view>
						<view class="content">{{item.comments}}</view>
					</view>
					<view class="empty">只展示最近100条数据</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {departmentDetail,comments} from '@/api/department.js'
	export default{
		data(){
			return{
				topBgColor: 'rgba(0,0,0,0)',
				detail:{
					
				},
				tabActive:2,
				list:[],
			}
		},
		watch:{
			tabActive(){
				this.getComments()
			}
		},
		methods:{
			async getDetail(id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.detail=await departmentDetail(id)
			},
			getComments(id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				comments({associated_id:this.detail.id,page:1,limit:100,type:this.tabActive}).then((res)=>{
					this.list=res.list||[];
				})
			}
		},
		computed:{
			
		},
		async onLoad(option) {
			await this.getDetail(option.id)
			this.getComments(option.id);
		},
		onShareAppMessage() {
			let page=getCurrentPages()
			return{
				title:'我分享了一个人力资源公司，快来看看吧',
				path:page[page.length-1].$page.fullPath
			}
		}
	}
</script>

<style lang="scss" scoped>
	.department-detail-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
			background: #fff;
			border-radius: 12px;
			padding: 30rpx;
		}
		.info-block{
			margin: 0 auto;
			.title{
				margin-bottom: 20rpx;
			}
			.introduce{
				line-height: 2;
				text-indent: 64rpx;
			}
			.company-photo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.company-info{
				width: calc(100% - 160rpx);
				display: flex;
				flex-direction: column;
				justify-content: center;
				.company-name-block{
					display: flex;
					align-items: center;
					.company-name{
						width:calc(100% - 140rpx);
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.btn-block{
						width:120rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn-item{
							margin: 0 10rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
				
				.evaluate{
					color: #767676;
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
			.tab-block{
				width: 100%;
				display: flex;
				align-items: center;
				.tab-item{
					padding: 10rpx 20rpx;
					font-size: 26rpx;
					border-radius: 18px;
					background: #f1f1f1;
					color: #717171;
					margin-right: 20rpx;
				}
				.tab-item.active{
					background: #fff1d6;
					color: $orange-color;
				}
			}
			.list-block{
				margin-top: 30rpx;
				border-top: 1px solid #efefef;
				.list-item{
					padding: 30rpx 0;
					border-bottom: 1px solid #efefef;
					.user-info{
						display: flex;
						align-items: center;
						.user-photo{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 30rpx;
						}
						.user-name{
							width: calc(100% - 80rpx);
						}
					}
					.content{
						margin-top: 10rpx;
						font-size: 28rpx;
						line-height: 2;
					}
				}
			}
		}
	}
</style>